<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <!-- 1.提交学生信息：姓名、年龄、身高、电话
         2.要在表格展示 [回顾]

         1.提交表单，获取信息，放入表格
    -->
    <form>
            姓名:<input type="text" id="username"/><br/>
            年龄:<input type="text" id="age"/><br/>
            身高:<input type="text" id="height"/><br/>
            电话:<input type="text" id="telPhone"/><br/>
            <button type="submit" id="btn">提交</button>
    </form><br/>
    <table width="700px" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>
        

    </table>

    <script>
        //1.提交按钮绑定事件
        document.querySelector("#btn").onclick=function(){
            //2获取到每个表单元的值
            var username = document.querySelector("#username").value
            var age = document.querySelector("#age").value
            var height = document.querySelector("#height").value
            var telPhone = document.querySelector("#telPhone").value

            //3.方式1
            // var tr = "<tr>"+
            //             "<td>"+username+"</td>"+
            //             "<td>"+age+"</td>"+
            //             "<td>"+height+"</td>"+
            //             "<td>"+telPhone+"</td>"+
            //         "</tr>"
            //4.行放入tbody
            // document.querySelector("#tb").innerHTML+=tr;

            //4.玩对象
            var tbody = document.querySelector("#tb")
            var arr = [username,age,height,telPhone]
            var tr = document.createElement("tr")
            for(var i = 0;i<arr.length;i++){//得到一个数据，一个单元格的数据
                var td = document.createElement("td")
                td.innerText=arr[i];
                tr.appendChild(td);//每一个td放入tr
                
            }
            //生成好了tr之后，放入到tbody
            tbody.appendChild(tr);

            return false;//不要提交
        }
    
    </script>
</body>
</html>